<template>
  <view class="content">
    <view class="title">
      {{title}}
    </view>
    <view class="container">
      <view class="html-content" v-html="htmlContent"> </view>
    </view>
  </view>
</template>

<script setup>
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'
  import {
    ref
  } from 'vue'
  import {
    getInfoDetail
  } from '../../apis/apis.js'

  const htmlContent = ref('')
  const title = ref('')

  onLoad((options) => {
    console.log('接收到的title', options.title)
    fetchData(options.id)
    title.value = options.title
  })

  async function fetchData(id) {
    try {
      const res = await getInfoDetail(id);
      // console.log('接口返回数据：', res);
      // console.log('接口返回数据123：', res.data.content);
      if (res.data?.content) {
        htmlContent.value = res.data.content
      } else {
        htmlContent.value = '暂无内容'
      }
    } catch (error) {
      console.error('请求失败：', error);
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    // background-color: #333;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    color: #444;
    border-bottom: 1px solid #666;
  }

  .container {
    padding: 10px;
  }

  .html-content {
    /* 核心：内容溢出时显示滚动条 */
    width: 100%;
    height: 100%;
    overflow: auto;
    /* 自动显示滚动条（内容溢出时） */
    /* 优化滚动体验 */
    scrollbar-width: thin;
    /* 细滚动条（Firefox） */
    line-height: 1.6;
    /* 优化文本可读性 */
  }
</style>